import QtQuick

Canvas {
    property int value
    property real radius:7.5
    id: root
    width: radius*2
    height: radius*2
    onPaint: {
        // get context to draw with
        var ctx = getContext("2d")
        ctx.clearRect(0,0,radius*2,radius*2)
        ctx.fillStyle = 'red'
        ctx.beginPath()
        ctx.arc(radius,radius,radius,0,Math.PI*2)
        ctx.fill()

        // 绘制白色数字1
        ctx.fillStyle = "white"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        if(value > 9){
            if(value > 99){
                ctx.font = "bold 9px Arial"
                ctx.fillText('99+', width/2, height/2)
            }else{
                ctx.font = "bold 10px Arial"
                ctx.fillText(value, width/2, height/2)
            }
        }else {
            ctx.font = "bold 12px Arial"
            ctx.fillText(value, width/2, height/2)
        }
    }
}
